<template>
  <div class="">
    <van-nav-bar
      @click-left="$router.back()"
      left-arrow
      title="我的钱包"
      right-text="明细"
      @click-right="clickRight"
      fixed
    >
    </van-nav-bar>
    <main>
      <div class="wallet">
        <div class="left">
          <h3>
            <img src="../../assets/images/wallet/wallet_icon.png" alt="" />
            我的钱包
          </h3>
          <div class="rights">
            <span @click="chongzhi">充值</span>
            <span @click="tixian">提现</span>
          </div>
        </div>
        <div class="balance">
          <!-- 账号余额：<span> ￥{{userInfo.balance || 0}}</span> -->
          <div class="balance-item">
            <span>
              ￥{{
                isPower == 3
                  ? userInfo.balance || 0
                  : (userInfo.balance + userInfo.agentBalance).toFixed(2) || 0
              }}</span
            >
            <p>总余额</p>
          </div>
          <div class="balance-item" v-if="isPower != 3">
            <span> ￥{{ userInfo.agentBalance || 0 }}</span>
            <p>推广余额</p>
          </div>
          <div class="balance-item">
            <span> ￥{{ userInfo.balance || 0 }}</span>
            <p>收益余额</p>
          </div>
        </div>
      </div>
      <!-- 展示数据 -->
      <div class="echarts">
        <span>本周</span>
        <div class="statistical" id="myChart"></div>
      </div>
    </main>
  </div>
</template>

<script>
// 引入echarts
import * as echarts from "echarts";
//引入折线图js
import echart from "../../plugins/echarts.js";
export default {
  name: "",
  data() {
    return {
      isPower: 2, //是否有权限
      userInfo: {},
      chartObj: {}, //图表数据
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  async mounted() {
    document.querySelector("html").style.backgroundColor = "#f3f5f7";
    document.querySelector("body").style.backgroundColor = "#f3f5f7";
    this.isCustomer();
    await this.getUserInfo();
    await this.getChart();
    this.week();
  },
  methods: {
    //获取图表数据
    async getChart() {
      let startDate = `${this.$publicObj.getTimeFirst()} 00:00:00`;
      let endDate = `${this.$publicObj.getTimeLast()} 23:59:59`;
      var userType;
      var userId;
      if (this.isPower == 1) {
        userType = 2;
        userId = this.$store.state.userInfo.account;
      } else {
        userId = this.$store.state.userInfo.id;
        userType = 1;
      }
      let obj = {
        userId,
        userType,
        startDate,
        endDate,
      };
      let res = await this.$api.getChart(obj);
      this.chartObj = res.data;
    },
    async getUserInfo() {
      await this.$store.dispatch("updateUserInfo");
      this.userInfo = this.$store.state.userInfo;
    },
    // 提现
    tixian() {
      this.$router.push({ name: "withdrawdeposit" });
    },
    // 充值
    chongzhi() {
      if (this.isPower == 1) {
        this.$router.push({ name: "topup" });
      } else {
        this.$toast("暂无权限！");
      }
    },
    //   本周数据
    week() {
      var one = this.$publicObj.getTimeFirst(1);
      var two = this.$publicObj.getTimeFirst(2);
      var three = this.$publicObj.getTimeFirst(3);
      var four = this.$publicObj.getTimeFirst(4);
      var five = this.$publicObj.getTimeFirst(5);
      var six = this.$publicObj.getTimeFirst(6);
      var seven = this.$publicObj.getTimeLast();

      let objs = {};
      objs[one] = 0;
      objs[two] = 0;
      objs[three] = 0;
      objs[four] = 0;
      objs[five] = 0;
      objs[six] = 0;
      objs[seven] = 0;
      //income  收益
      let income = JSON.parse(JSON.stringify(objs));
      for (var key in this.chartObj.income) {
        income[key] = this.chartObj.income[key];
      }
      let incomes = [];
      for (var x in income) {
        incomes.push(income[x]);
      }

      //pay充值
      let pay = JSON.parse(JSON.stringify(objs));
      for (var key in this.chartObj.pay) {
        pay[key] = this.chartObj.pay[key];
      }
      let pays = [];
      for (var x in pay) {
        pays.push(pay[x]);
      }

      //withdraw提现
      let withdraw = JSON.parse(JSON.stringify(objs));
      for (var key in this.chartObj.withdraw) {
        withdraw[key] = this.chartObj.withdraw[key];
      }
      let withdraws = [];
      for (var x in withdraw) {
        withdraws.push(withdraw[x]);
      }

      //consume消费
      let consume = JSON.parse(JSON.stringify(objs));
      for (var key in this.chartObj.consume) {
        consume[key] = this.chartObj.consume[key];
      }
      let consumes = [];
      for (var x in consume) {
        consumes.push(consume[x]);
      }

      var chartDom = document.getElementById("myChart");
      var myChart = echarts.init(chartDom);
      let obj = {
        color: ["#2C8BFA", "#6C6EFF", "#FEA956", "#FE4066"],
        legend: {
          data: ["收益", "充值", "提现", "消费"],
        },
        xAxis: {
          data: [
            one.slice(5, 10),
            two.slice(5, 10),
            three.slice(5, 10),
            four.slice(5, 10),
            five.slice(5, 10),
            six.slice(5, 10),
            seven.slice(5, 10),
          ],
        },
        yAxis: {
          data: [0, 50, 100, 150, 200, 250, 300, 350],
        },
        series: [
          {
            name: "收益",
            data: incomes,
            color: "#2C8BFA",
          },
          {
            name: "充值",
            data: pays,
            color: "#6C6EFF",
          },
          {
            name: "提现",
            data: withdraws,
            color: "#FEA956",
          },
          {
            name: "消费",
            data: consumes,
            color: "#FE4066",
          },
        ],
      };
      let option = echart.option(obj);

      option && myChart.setOption(option);
    },

    //点击明细
    clickRight() {
      this.$router.push({ path: "/moneydetail" });
    },
    //判断是否有权限创建
    async isCustomer() {
      let userWxData = JSON.parse(sessionStorage.getItem("userWxData"));
      let account = sessionStorage.getItem("agentId");
      let res = await this.$api.isCustomer({
        openId: userWxData.openid,
        account,
        id: this.$store.state.userInfo.id,
        phone: this.$store.state.userInfo.phone,
      });
      this.isPower = res.data;
    },
  },
};
</script>
<style scoped lang="less">
/* @import url(); 引入css类 */
.echarts {
  width: 100%;
  //   height: 265px;
  margin-bottom: 10px;
  background-color: #fff;
  padding: 10px 0;
  position: relative;
  span {
    position: absolute;
    right: 15px;
    top: 10px;
    width: 40px;
    height: 18px;
    border: 1px solid #999999;
    border-radius: 10px;
    font-size: 10px;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
#myChart {
  width: 100%;
  height: 245px;
  background-color: #fff;
}

main {
  padding: 15px;
  height: calc(100vh - 46px);
  overflow-y: scroll;
  .wallet {
    background: url("../../assets/images/wallet/wallet_bg.png") no-repeat;
    background-size: 100%;
    height: 110px;
    padding: 14px 14px 0 19px;
    color: #dee2f8;
    margin-top: 40px;
    .left {
      display: flex;
      justify-content: space-between;
      img {
        width: 16px;
        height: 16px;
      }
      .rights {
        display: flex;
        span {
          width: 50px;
          height: 18px;
          border: 1px solid #ffffff;
          border-radius: 5px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 13px;
          margin-left: 12px;
        }
      }
    }
    .balance {
      display: flex;
      justify-content: space-around;
      text-align: center;
      margin-top: 20px;
      span {
        display: block;
        font-size: 18px;
      }
      p {
        display: block;
        font-size: 12px;
      }
    }
  }
}
</style>
